<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<p>在元素 和 template 中使用 v-if 指令：</p>
			<p v-if="seen">现在你看到我了</p>
			<template v-if="ok">
				<h1>菜鸟教程</h1>
				<p>学的不仅是技术，更是梦想！</p>
				<p>哈哈哈，打字辛苦啊！！！</p>
			</template>
			<p>条件判断使用 v-if 指令：</p>
			<div v-if="type === 'A'">
				A
			</div>
			<div v-else-if="type === 'B'">
				B
			</div>
			<div v-else-if="type === 'C'">
				C
			</div>
			<div v-else>
				Not A/B/C
			</div>
			<p>我们也可以使用 v-show 指令来根据条件展示元素：</p>
			<h1 v-show="ok">Hello!</h1>

			<p>v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。</p>
			<ol>
				<li v-for="site in sites">
					{{ site.name }}
				</li>
			</ol>
			<p>模板中使用 v-for：</p>
			<ul>
				<template v-for="site in sites">
					<li>{{ site.name }}</li>
					<li>--------------</li>
				</template>
			</ul>

			<p>v-for 可以通过一个对象的属性来迭代数据：你也可以提供第二个的参数为键名：第三个参数为索引：</p>
			<ul>
				<li v-for="(value, key) in object">
					{{ key }} : {{ value }}
				</li>

			</ul>
			<ul>
				<li v-for="(value, key, index) in object">
					{{ index }}. {{ key }} : {{ value }}
				</li>
			</ul>

			<ul>
				<li v-for="n in 10">
					{{ n }}
				</li>
			</ul>

		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				seen: true,
				ok: true,
				type: 'C',
				sites: [{
						name: 'Runoob'
					},
					{
						name: 'Google'
					},
					{
						name: 'Taobao'
					}
				],
				object: {
					name: '菜鸟教程',
					url: 'https://www.runoob.com',
					slogan: '学的不仅是技术，更是梦想！'
				}
			}
		});
	</script>

</html>